<template>
    <div class="scroll_wrapper" ref="scroll_wrapper">
        <slot></slot>  
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name: 'Scroller',
    props: {
        handleToscroll: {
            type: Function,
            default: () => {}
        },
        handleToTouchEnd: {
            type: Function,
            default: () => {}
        }
    },
    mounted () {
        const scroll = new BScroll(this.$refs.scroll_wrapper, {
            tap: true,   // 点击区域时派发tap事件
            probeType: 1 //滚动时派发scroll事件，会节流（一段时间只能触发一次）
        }) 
        this.scroll = scroll
        scroll.on('scroll', (pos) => {
            this.handleToscroll(pos)
        })
        scroll.on('touchEnd', (pos) => {
            this.handleToTouchEnd(pos)
        }) 
    },
    methods: {
        toScrollTop (y) {
            this.scroll.scrollTo(0, y)
        }
    }
}
</script>

<style lang="scss" scoped>
   .scroll_wrapper {
        height: 100%;   
   }
</style>
